<div class="layui-card">
	<div class="layui-card-header">
		<h2 class="header-title">文章列表</h2>
		<span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>文章列表</cite></a>
        </span>
	</div>
	<div class="layui-card-body">
		<div class="layui-form toolbar">
			搜索：<input id="role-edit-search" class="layui-input search-input" type="text" placeholder="输入关键字" />&emsp;
			<button id="role-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
			<button id="matter-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button> &emsp;
		</div>

		<!-- 数据表格 -->
		<table class="layui-table" id="matter-table" lay-filter="matter-table"></table>
	</div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="matter-table-bar">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="short">状态</a>
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="mt-model">
	<form id="mt-form" lay-filter="mt-form" class="layui-form model-form">
		<input name="articleId" type="hidden" />
		<div class="layui-form-item">
			<label class="layui-form-label">是否发布</label>
			<div class="layui-input-block">
				<input type="checkbox" name="show" lay-skin="switch" value="1" lay-text="发布|未发布">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否置顶</label>
			<div class="layui-input-block">
				<input type="checkbox" name="top" lay-skin="switch" value="1" lay-text="置顶|取消置顶">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">发布时间</label>
			<div class="layui-input-block">
				<input type="data" class="layui-input" name="data" id="test18" placeholder="yyyy-MM-dd">
			</div>
		</div>
		<div class="layui-form-item model-form-footer">
			<button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
			<button class="layui-btn" lay-filter="mt-form-submit" lay-submit>保存</button>
		</div>
	</form>
</script>

<script>
	layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects', 'index', 'laydate'], function() {
		var form = layui.form;
		var table = layui.table;
		var laydate = layui.laydate;
		var config = layui.config;
		var layer = layui.layer;
		var util = layui.util;
		var index = layui.index;
		var admin = layui.admin;
		var formSelects = layui.formSelects;
		showM()

		var curTime = new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate() + " " + new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds();

		//渲染表格
		function showMat(sj) {
			table.render({
				elem: '#matter-table',
				data: sj,
				page: true,
				limit: 30,
				limits: [30, 60, 90],
				cols: [
					[{
							field: 'articleId',
							title: '文章ID'
						},
						{
							field: 'label',
							title: '文章标签'
						},
						{
							field: 'title',
							title: '文章标题'
						},
						{
							field: 'author',
							title: '作者',
							templet: function(b) {
								if(b.author == null) {
									return "松果健康"
								} else {
									return b.author
								}
							}
						},
						{
							field: 'classifyName',
							title: '文章分类'
						},
						{
							field: 'addTime',
							title: '发布时间',
							templet: function(b) {
								if(b.putawayTime != null) {
									if(b.show == "0") {
										return "未发布"
									}else{
										return b.putawayTime.split(" ")[0]
									}
								} else {
									if(b.show == "0") {
										return "未发布"
									}else{
										return b.putawayTime.split(" ")[0]
									}
								}
							}
						},
						{
							field: 'commentNum',
							title: '评论数'
						},
						{
							field: 'show',
							title: '发布状态',
							templet: function(b) {
								switch(b.show) {
									case "1":
										return "发布";
									case "0":
										return "未发布"
									default:
										break;
								}
							}
						}, {
							align: 'center',
							toolbar: '#matter-table-bar',
							title: '操作'
						}
					]
				]
			});
		}

		function showM() {
			$.ajax({
				type: "POST",
				url: getArticles,
				data: {
					params: JSON.stringify({
						pageSize: 1000,
						pageNumber: 1,
					})
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {},
				success: function(data) {
					console.log(data)
					showMat(data.rows)
				},
				beforeSend: function() {},
				complete: function() {},

				error: function(result) {
					console.log(result);
				}
			});
		}

		form.on('submit(mt-form-submit)', function(data) {
			console.log(data.field)
			var f, t
			if(data.field.show == undefined) {
				f = 0
			} else {
				f = 1
			}

			if(data.field.top == undefined) {
				t = 0
			} else {
				t = 1
			}

			if(data.field.data.length <= 0) {
				layer.msg("请选择时间", {
					icon: 2
				})
				return;
			}

			$.ajax({
				type: "POST",
				url: updateArticles,
				data: {
					params: JSON.stringify({
						articleId: data.field.articleId,
						show: f,
						top: t,
						putawayTime: data.field.data
					})
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				beforeSend: function(request) {},
				success: function(datas) {

					if(datas.code == 0) {
						layer.closeAll();
						layer.msg(datas.msg, {
							icon: 1
						});
						showM()
					} else {
						layer.msg(datas.msg, {
							icon: 2
						});
					}
				},
				beforeSend: function() {},
				complete: function() {},

				error: function(result) {
					console.log(result);
				}
			});

			return false;
		});

		// 工具条点击事件
		table.on('tool(matter-table)', function(obj) {
			var data = obj.data;
			if(obj.event === 'edit') { //修改
				admin.putTempData('matterd', data); // 用缓存传递参数
				admin.putTempData('matterv', "update"); // 用缓存传递参数

				var t = ""
				console.log(data.title.split("——").length)
				if(data.title.length > 6) {
					t = data.title.substring(0,6)
				} else {
					t = data.title
				}
				index.openNewTab({
					title: t,
					url: 'components/system/essaytz.html',
					menuId: data.articleId + "u"
				});
			} else if(obj.event === 'del') { //删除
				doDelete(data);
			} else if(obj.event === "short") {
				showEditModel(data)
			}
		});

		// 搜索按钮点击事件
		$('#role-btn-search').click(function() {
			var keyword = $('#role-edit-search').val();
			table.reload('matter-table', {
				where: {
					keyword: keyword
				}
			});
		});

		$('#matter-btn-add').click(function() {
			admin.putTempData('matterv', "new");
			index.openNewTab({
				title: "新文章",
				url: 'components/system/essaytz.html',
				menuId: "new"
			});
		})

		// 显示编辑弹窗
		var showEditModel = function(data) {
			layer.open({
				type: 1,
				title: '修改状态',
				area: '450px',
				offset: '120px',
				content: $('#mt-model').html(),
				success: function() {
					$('#mt-form')[0].reset();
					$('#mt-form').attr('method', 'GET');
					laydate.render({
						elem: '#test18',
						value: curTime,
						type: "datetime",
						done: function(value, date) {}
					});
					if(data) {
						var l = false
						if(data.show == 0) {
							l = false
						} else {
							l = true
						}

						var tops = false
						if(data.top == "0") {
							tops = false
						} else {
							tops = true
						}
						form.val('mt-form', {
							"articleId": data.articleId,
							"show": l,
							"top": tops
						});

					}
				}
			});
		};

		// 删除
		var doDelete = function(obj) {
			layer.confirm('确定要删除吗？', function(i) {
				$.ajax({
					type: "POST",
					url: delArticles,
					data: {
						articleId: obj.articleId
					},
					dataType: "json",
					xhrFields: {
						withCredentials: true
					},
					success: function(data) {
						console.log(data);
						if(data.code == 0) {
							layer.closeAll();
							layer.msg(data.msg, {
								icon: 1
							});
							showM()
						} else {
							layer.msg(data.msg, {
								icon: 2
							});
						}
					},
					error: function(result) {
						console.log(result);
					},
				});
			});
		};

	});
</script>